<template>
    <div>
        <h1>店铺列表</h1>
        <a href="/add">店铺添加</a>
        <a href="https://localhost:7154/api/Room/Exlsx">导出</a>
        <br>
        商铺名称:<input type="text" v-model="list.rname">
        商品状态:<select v-model="list.typeid">
                    <option value="0">请选择</option>
                    <option v-for="x in xl" :value="x.typeId">{{x.tname}}</option>
                </select>
        <input type="button" value="查询" @click="cx">
        <input type="button" value="重置" @click="cz">
        <table class="table">
            <thead>
                <tr>
                    <td>商铺名称</td>
                    <td>联系人手机号</td>
                    <td>商铺楼层</td>
                    <td>商铺编号</td>
                    <td>建筑面积</td>
                    <td>室内面积</td>
                    <td>租金(元/平方)</td>
                    <td>商品状态</td>
                    <td>备注说明</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="d in data">
                    <td>{{d.rname}}</td>
                    <td>{{d.rphone.substring(0,3)}}****{{d.rphone.substring(7,11)}}</td>
                    <td>{{d.rlc}}</td>
                    <td>{{d.rbh}}</td>
                    <td>{{d.rjzmj}}</td>
                    <td>{{d.rsnmj}}</td>
                    <td>{{d.rzj}}</td>
                    <td :style="d.tname=='出租中'?'color: green;':'color: blue;'">{{d.tname}}</td>
                    <td >{{d.rbz}}</td>
                    <td>
                        <input type="button" value="删除" @click="sc(d.rid)">
                        <input type="button" value="编辑" @click="update(d.rid)">
                    </td>
                </tr>
            </tbody>
        </table>
        共{{page.totanum}}条,每页{{list.size}}条,共{{page.totapage}}页,当前{{list.index}}页
        <input type="button" value="首页" @click="fy(1)">
        <input type="button" value="上一页" @click="fy(2)">
        <input type="button" v-for="m in page.totapage" :value="m" @click="ym(m)">
        <input type="button" value="下一页" @click="fy(3)">
        <input type="button" value="尾页" @click="fy(4)">
        <input type="number" v-model="list.index" @change="tz(list.index)">
        <select v-model="list.size" @change="yrl">
            <option value="2">请选择</option>
            <option value="3">每页3条</option>
            <option value="5">每页5条</option>
            <option value="10">每页10条</option>
        </select>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import {ref,onMounted} from 'vue'
import {useRouter,useRoute} from 'vue-router'
const router=useRouter();
const route=useRoute();
const data=ref([{
    "rid": 2,
      "rname": "笑笑娱乐",
      "rphone": "15214725836",
      "rlc": "2层",
      "rbh": "1001",
      "rjzmj": "100",
      "rsnmj": "80",
      "rzj": 100,
      "typeId": 1,
      "rbz": "地段好",
      "tname": "出租中"  
}])
const list=ref({
    index:1,
    size:2,
    rname:"",
    typeid:0
})
const page=ref({
    totanum:0,
    totapage:0
})
onMounted(()=>{
    show();
    xlk()
})
const show=()=>{
    axios.get("/api/Room/GetRoom",{params:list.value}).then(res=>{
        data.value=res.data.list
        page.value.totanum=res.data.listcount
        page.value.totapage=Math.ceil(page.value.totanum/list.value.size)
    })
}
const fy=(val:any)=>{
    if(val==1){
        list.value.index=1
        show()
    }
    if(val==2){
        if(list.value.index>1){
            list.value.index-=1
            show()
        }
    }
    if(val==3){
        if(list.value.index<page.value.totapage){
            list.value.index+=1
            show()
        }
    }
    if(val==4){
        list.value.index=page.value.totapage
        show()
    }
}
const ym=(val:any)=>{
    list.value.index=val
    show()
}
const tz=(val:any)=>{
    if(list.value.index>1&&list.value.index<=page.value.totapage){
        list.value.index=val
        show()
    }
    else{
        list.value.index=1
        show()
    }
    
}
const yrl=()=>{
    list.value.index=1
    show()
}
const xl=ref([{
    "typeId": 0,
    "tname": ""
}])
const xlk=()=>{
    axios.get("/api/Room/GetTypeList").then(res=>{
        xl.value=res.data
    })
}
const cx=()=>{
    list.value.index=1
    show()
}
const cz=()=>{
    list.value.rname="";
    list.value.typeid=0


    list.value.index=1
    show()
    
}
const sc=(val:any)=>{
    if(confirm("确认删除吗")){
        axios.delete("/api/Room/DeleteRoom",{params:{rid:val}}).then(res=>{
        if(res.data>0){
            alert("删除成功")
            show()
        }
        else{
            alert("删除失败")
            return;
        }
    })
    }
    
}
const update=(val:any)=>{
    router.push({path:"/update",query:{rid:val}})
}
</script>

<style scoped>

</style>